<template>
    <view>
        <view class="comment"> 
            <view class="comment-header">
                <!-- <view class="header-mark"></view> -->
                <view class="header-title">评论（{{total}}）</view>
            </view>
            <block v-for="(item, index) in commentList" :key="index">
                <view class="comment-item">
                    <view class="head-portrait">
                        <img :src="item.customer.avatar_url" alt="" style="width:100%;height:100%">
                    </view>
                    <view class="comment-info">
                        <view class="comment-person">
                            <text style="color:#333333;font-size:30rpx">{{item.customer.nick_name}}</text>
                            <text style="color:#999999;font-size:24rpx;margin-left:30rpx">{{item.created_at}}</text>
                        </view>
                        <view class="comment-text">{{item.content}}</view>
                        <view class="comment-photo-box">
                            <block v-for="(item1, index1) in item.images" :key="index1">
                                <view class="comment-photo">
                                    <img :src="item1" alt="" style="width:100%;height:100%">
                                </view>
                            </block>
                        </view>
                    </view>
                </view>
            </block>
        </view>
    </view>
</template>

<script>
import { OrderModel } from '../../model/order'
const orderModel = new OrderModel()
export default {
    data() {
        return {
            spu_id: '',
            page: 1,
            commentList: [],
            total: 0,
            flag: true
        }
    },
    methods: {
        // 获取所有评论信息
        getAllComment() {
            let data = {
                spu_id: this.spu_id,
                page: this.page
            }
            orderModel.getCommentMore(data).then((res) => {
                if(res.code == 200) {
                    this.commentList = this.commentList.concat(res.data.data)
                    res.data.data.length == 0 ? this.flag = false : this.flag = true 
                    this.total = res.data.total
                }
            })
        }
    },
    onReachBottom() {
        if(this.flag == true) {
            this.page = this.page + 1
            this.getAllComment()
        }
    },
    onLoad(option) {
        this.spu_id = option.spu_id
        this.getAllComment()
    }
}
</script>

<style>
    page {
        background: #ffffff;
    }
    .comment-header {
        display: flex;
        justify-content: left;
        margin-left: 40rpx;
    }
    .header-title {
        color: #333333;
        font-size: 36rpx;
        font-weight: 500;
        line-height: 50rpx;

    }
    .header-title::before {
        display: inline-block;
        content: '';
        width: 6rpx;
        height: 24rpx;
        background:#24C79C;
        border-radius: 3rpx;
        margin-right: 10rpx;
    }
    .header-more {
        color: #666666;
        font-size: 24rpx;
        font-weight: 500;
        margin-right: 39rpx;
        line-height: 50rpx;
    }
    .comment-item {
        padding: 43rpx 0 30rpx 42rpx;
        border-bottom: 1rpx solid #F5F5F5;
        display: flex;
        justify-content: left;
    }
    .comment-info {
        width: 473rpx;
        margin-left: 30rpx;
    }
    .head-portrait {
        width: 57rpx;
        height: 57rpx;
    }
    .comment-person {
        margin-top: 20rpx;
    }
    .comment-text {
        color: #333333;
        font-size: 28rpx;
        font-weight: 500;
        margin-top: 40rpx;
    }
    .comment-photo-box {
        display: flex;
        justify-content: left;
    }
    .comment-photo {
        width: 124rpx;
        height: 124rpx;
        margin-top: 27rpx;
        margin-right: 20rpx;
        border-radius:10rpx;
    }
</style>